<template>
  <div class="login">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 登陆表单 rules为校验规则，只有全部规则满足才能触发 submit -->
    <van-form @submit="onSubmit">
      <!-- 手机号 -->
      <van-field
        v-model="form.phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[
          { required: true, message: '请填写手机号码' },
          { pattern: /^1\d{10}$/, message: '手机号格式错误，请重新输入' }
        ]"
      />
      <!-- 密码框 -->
      <van-field
        v-model="form.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern: /^[0-9a-zA-Z]{6,12}$/, message: '密码格式错误，请输入6-12位密码' }
          ]"
      />
      <!-- 登陆按钮 -->
      <div style="margin: 16px;">
        <!-- 给登陆按钮添加加载状态 -->
        <van-button :loading="loading" round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// 引入接口
import { login } from '@/api/user'
export default {
  name: 'login',
  data () {
    return {
      // 表单数据
      form: {
        phone: 17201234567,
        password: 'qsryja'
      },
      // 加载状态信号值
      loading: false
    }
  },
  methods: {
    // 导航栏返回事件函数
    onClickLeft () {
      // 使用 go 方法实现返回上一页
      this.$router.go(-1)
    },
    // 表单登陆事件函数
    async onSubmit () {
      // 请求接口之前让登录按钮处于加载状态
      this.loading = true
      // 调用接口
      const { data } = await login(this.form)
      if (data.state === 1) {
        // 登录成功调用vuex方法存储登录信息
        this.$store.commit('setUser', data.content)
        this.$router.push(this.$route.query.path)
        // 如果接口请求成功弹出提示（暂时先不存储数据）
        this.$toast.success('登陆成功')
      } else {
        this.$toast.fail('登录失败')
      }
      // 请求完成后不管成功还是失败，都需要将按钮取消加载状态
      this.loading = false
    }
  }
}
</script>
